<template>
	<view class="bg-F5F5F5" style="padding-bottom: 33rpx; ">
		<!-- <x-did-title/> -->
		<view class="px-28 pt-28">

			<view class="bg-FFFFFF bor-r20"
				style="padding-top: 28rpx;padding-left: 23rpx;padding-right: 28rpx;padding-bottom: 34rpx;box-sizing: border-box;">

				<view class="f-bold f-30 c-11">
					{{name}}
				</view>
				<view class="mt-26 flex just-between">

					<view class="flex">
						<view class="mr12">
							<image src="../../goodsPage/static/doct/dingwei.png" mode=""
								style="width: 24rpx;height: 32rpx;"></image>
						</view>

						<view class="mr-44 f-24 fw-400 c-11">
							{{province}}
						</view>
					</view>


					<view 
					@click="daohang"
					class="bg-FFF7EB flex bor-r30 aj-center"
						style="width: 96rpx;height: 36rpx;box-sizing: border-box;">
						<view class="mr-6" style="width:36rpx;height: 36rpx;">
							<image src="../../goodsPage/static/doct/daohang.png" style="width:36rpx;height: 36rpx;"
								mode="">
							</image>
						</view>
						<view class="c-DFB982 c-DFB982 fw-400 f-22  " 
							style="width: 44rpx;height: 30rpx; margin-right: 10rpx;">
							导航
						</view>
					</view>


				</view>
			</view>


			<view class="mt-20 px-28 pt-28 bg-FFFFFF " style="border-radius: 20rpx;padding-bottom: 39rpx; ">
				<slot name="shoop" />
				<view class="just-between f-26 f-bold c-11 border-b-DDDDDD" style="padding-bottom:34rpx;">
					<view class="">
						商品总价
					</view>
					<view class="">
						￥{{price}}
					</view>
				</view>
				<view class="just-between" style="flex: 1; text-align: end;margin-top: 34rpx;">
					<view class="">
						<slot name="qxddan" />
					</view>
					<view class="flex f-bold aj-center">
						<text class="f-24 f-400 c-77">
							实付金额
						</text>
						<text class=" f-36" style="color: #E82C2C;">￥{{pay_fee}}</text>
					</view>
				</view>

			</view>
			<view class="mt-20  f-26 f-bold c-77 bg-FFFFFF bor-r20"
				style=" padding-bottom: 48rpx;padding-top: 28rpx;padding-left: 28rpx;padding-right: 25rpx;">
				<view class="f-30    c-11">
					订单信息
				</view>
				<view class="flex just-between flex-nowrap mt-16" style="overflow: hidden;box-sizing: border-box;">
					<view class="flex">
						<view class="f-26 aj-center c-77 mr-32" style="overflow: hidden;box-sizing: border-box;">
							订单编号
						</view>
						<view class="f-22 c-77 aj-center  fw-400" style="overflow: hidden;box-sizing: border-box;">
							{{order_sn}}
						</view>
					</view>
					<view class="bg-F5F5F5 aj-center aj-center" @click="fuzhi"
						style="overflow: hidden;box-sizing: border-box;width: 88rpx;border-radius: 44px;height: 44rpx;margin-left: 86rpx;">
						复制
					</view>
				</view>

				<view class="flex  mt-50">
					<view class="mr-32">
						下单时间
					</view>
					<view class="f-22 c-77 aj-center  fw-400">
						{{createtime}}
					</view>

				</view>
				<view class="flex  mt-50">
					<view class="mr-32">
						支付方式
					</view>
					<view class="f-24 c-77 aj-center  fw-400">
						{{pay_type | pay}}
					</view>

				</view>

			</view>


		</view>

	</view>
</template>

<script>
	var paystate = [{
			id: 'wechat',
			name: '微信支付'
		},
		{
			id: 'alipay',
			name: '支付宝'
		},
		{
			id: 'wallet',
			name: '钱包'
		},
		{
			id: 'score',
			name: '积分'
		}
	];
	export default {
		props: {
			name: {
				type: String,
				default: ''
			},
			//实际支付金额
			pay_fee: {
				type: String,
				default: ''
			},
			// 总价商品
			price: {
				type: String,
				default: ''
			},
			// 地址
			province: {
				type: String,
				default: ''
			},
			// 订单编号
			order_sn: {
				type: String,
				default: ''
			},
			// 下单时间
			createtime: {
				type: String,
				default: ''
			},
			// 支付方式
			pay_type: {
				type: String,
				default: ''
			}
		},
		data() {
			return {
				
			}
		},
		filters: {
			pay(id) {
				const payobj = paystate.find(item => item.id == id);
				return payobj ? payobj.name : null;
			},
		},
		methods: {
			daohang() {
				this.$emit('daohangs') 
			},
			fuzhi() {
				uni.setClipboardData({
					data: this.order_sn,
					success: function() {
						console.log('success');
					}
				});
			}
		}
	}
</script>

<style scoped>
	@import url("@/common/css/fress.css");
	@import url("@/common/css/mycss.css");

	image {
		width: 100%;
		height: 100%;

	}

	.pt-30 {
		padding-top: 0rpx !important;
	}
</style>
